<!--考试统计页面-->
<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">
    <div class="layui-tab layui-tab-brief" lay-filter="tab">
      <ul class="layui-tab-title">
        <li class="layui-this">单期统计</li>
        <li>企业统计</li>
        <li>考生统计</li>
        <li>知识统计</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">期号</label>
                    <div class="layui-input-inline">
                      <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入期号">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">考试类型</label>
                    <div class="layui-input-inline">
                      <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">全部</option>
                        <option value="0">B</option>
                        <option value="1" selected="">C</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon"></i> 查询
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </fieldset>
          <table class="layui-hide" id="table1" lay-filter="table1"></table>
        </div>
        <div class="layui-tab-item">
          <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">企业名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入企业名称">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">考试时间</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" id="time-range">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon"></i> 查询
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </fieldset>
          <table class="layui-hide" id="table2" lay-filter="table2"></table>
        </div>
        <div class="layui-tab-item">
          <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                      <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入姓名">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                      <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">男</option>
                        <option value="1" selected="">女</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">报考类型</label>
                    <div class="layui-input-inline">
                      <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">B</option>
                        <option value="1" selected="">C</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">所在区域</label>
                    <div class="layui-input-inline">
                      <select name="interest" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">田家庵</option>
                        <option value="1" selected="">寿县</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">考试时间</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" id="time-range1">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon"></i> 查询
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </fieldset>
          <table class="layui-hide" id="table3" lay-filter="table3"></table>
        </div>
        <div class="layui-tab-item">
          <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">知识点名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入知识点名称">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">考试时间</label>
                    <div class="layui-input-inline">
                      <input type="text" class="layui-input" id="time-range2">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon"></i> 查询
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </fieldset>
          <table class="layui-hide" id="table4" lay-filter="table4"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    },
    {
      'id': 10000,
      name: '小明',
      idCard: '3424000000',
      img: 'http://placehold.it/350x200',
      type: 'B',
      count: '3424000000',
      jigou: '小明',
      beizhu: '无'
    }
  ]
  layui.use(['form', 'table', 'miniPage', 'element', 'laydate'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      laydate = layui.laydate,
      miniPage = layui.miniPage
    form.render();
    // 单期统计
    table.render({
      elem: '#table1',
      // url: 'api/table.json',
      data: tableData,
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'count', title: '期号' },
        { field: 'name', title: '考试类型'},
        { field: 'name', title: '难度比例'},
        { field: 'idCard', title: '应考人数' },
        { field: 'name', title: '实考人数'},
        { field: 'type', title: '90-100分' },
        { field: 'type', title: '80-90分' },
        { field: 'type', title: '60-80分' },
        { field: 'type', title: '60分以下' },
        { field: 'type', title: '实考人员平均分' },
        { field: 'type', title: '合格率' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 企业统计
    table.render({
      elem: '#table2',
      // url: 'api/table.json',
      data: tableData,
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'count', title: '企业名称' },
        { field: 'name', title: ' 实考人数'},
        { field: 'name', title: '90-100分'},
        { field: 'idCard', title: '80-90分' },
        { field: 'type', title: '60-80分' },
        { field: 'type', title: '60分以下' },
        { field: 'type', title: '实考人员平均分' },
        { field: 'type', title: '通过率' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 考生统计
    table.render({
      elem: '#table3',
      // url: 'api/table.json',
      data: tableData,
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'count', title: '姓名' },
        { field: 'name', title: '性别'},
        { field: 'name', title: '准考证号'},
        { field: 'idCard', title: '身份证号' },
        { field: 'type', title: '报考类型' },
        { field: 'type', title: '所属单位' },
        { field: 'type', title: '所在区域' },
        { field: 'type', title: '职位' },
        { field: 'type', title: '成绩' },
        { field: 'type', title: '答卷时间' },
        { field: 'type', title: '备注' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 知识统计
    table.render({
      elem: '#table4',
      // url: 'api/table.json',
      data: tableData,
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '知识点名称'},
        { field: 'name', title: '题数'},
        { field: 'idCard', title: '参与开始人数' },
        { field: 'type', title: '考试人数' },
        { field: 'type', title: '得分率' }
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 5,
      page: true,
      skin: 'line'
    })

    // 日期范围
    laydate.render({
      elem: '#time-range'
      ,range: true //或 range: '~' 来自定义分割字符
    });
    laydate.render({
      elem: '#time-range1'
      ,range: true //或 range: '~' 来自定义分割字符
    });
    laydate.render({
      elem: '#time-range2'
      ,range: true //或 range: '~' 来自定义分割字符
    });

    // 操作
    table.on('tool(currentTableFilter)', function (obj) {
      switch (obj.event) {
        case 'action':
          console.log('交卷')
          break
        case 'change':
          console.log('切换')
          break
      }
    })

  })
</script>
